<template>
	<el-container>
		<el-main>
			<el-form ref="ruleFormRef" :model="UserInfo" label-width="100px" show-message>
				<el-form-item :rules="{ required: true, message: '请输入账号', trigger: 'blur' }" label="账号：" prop="UserID">
					<el-input v-model="UserInfo.UserID" disabled />
				</el-form-item>
				<el-form-item :rules="{ required: true, message: '请输入用户名称', trigger: 'blur' }" label="用户名称：" prop="UserName">
					<el-input v-model="UserInfo.UserName" />
				</el-form-item>
				<el-form-item :rules="{ required: true, message: '请输入电话', trigger: 'blur' }" label="电话：" prop="TelNo">
					<el-input v-model.trim="UserInfo.TelNo" />
				</el-form-item>
				<el-form-item label="邮箱：" prop="Email">
					<el-input v-model="UserInfo.Email" />
				</el-form-item>
				<el-form-item>
					<el-row>
						<el-col>
							<el-button @click="submit(ruleFormRef)" type="primary">提交</el-button>
							<el-button @click="cancel()">取消</el-button>
						</el-col>
					</el-row>
				</el-form-item>
			</el-form>
		</el-main>
	</el-container>
</template>

<script lang="ts" setup>
import type { FormInstance, FormRules } from 'element-plus'
import { httpReqeustApi } from '/@/api/linxyun/base';
import { ElMessage, ElMessageBox } from 'element-plus';

const props = defineProps<{UserInfo:Record<string, any>}>();
const emit = defineEmits(["setUpdatePop","refresh"])

const ruleFormRef = ref<FormInstance>()
const httpReqeust = httpReqeustApi();
const { UserInfo } = toRefs(props);


/**
 * @description: 提交当前表单的信息
 */
const submit =(formEl:FormInstance |undefined)=>{
	if (!formEl) return
  formEl.validate((valid) => {
    if (valid) {
      sendRequest(UserInfo)
    } else {
      console.log('error submit!')
      return false
    }
  })
}

/**
 * @description: 点击取消按钮，关闭弹窗
 */
const cancel =()=>{
	emit('setUpdatePop',false)
}
/**
 * @description: 发送修改请求
 */
const sendRequest = (param:any) =>{
	const finallyParam ={
		UserID:param.value.UserID,
		UserName:param.value.UserName,
		TelNo:param.value.TelNo,
		Email:param.value.Email
	}
  httpReqeust.Post('updateUserBaseInfo',finallyParam).then((result:any) => {
		if (result.msg === 'success' && result.code== '0000' ) {
			ElMessage({
		    type: 'success',
			  message: '修改成功',
		  });  
    } else {
			ElMessage({
		    type: 'error',
			  message: '修改失败',
		  });     
    }
		emit('setUpdatePop',false)
		emit('refresh',false)
	}).catch((err) => {
		ElMessage({
		  type: 'success',
			message: '修改失败',
		}); 
	});
}
</script>
